<!DOCTYPE html>
<html>
<head>
    <title>Zabuto | Calendar | Display Settings</title>
    <meta name="robots" content="noindex, nofollow">

    <!-- jQuery CDN -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

    <!-- Bootstrap CDN -->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="//oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="//oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->

    <!-- Font Awesome CDN -->
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">

    <!-- Zabuto -->
    <link rel="stylesheet" type="text/css" href="//zabuto.com/assets/css/style.css">
    <link rel="stylesheet" type="text/css" href="//zabuto.com/assets/css/examples.css">

    <!-- Zabuto Calendar -->
    <script src="../zabuto_calendar.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../zabuto_calendar.min.css">

</head>
<body>

<!-- container -->
<div class="container example">

    <h1>
        Calendar <span>Display Settings</span>
        <ul class="nav nav-pills pull-right">
            <li><a class="pull-right" href="navigation_settings.html">&laquo; Navigation Settings</a></li>
            <li><a class="pull-right" href="show_data.html">Show Data &raquo;</a></li>
        </ul>
    </h1>

    <hr>

    <div class="row">
        <div class="col-xs-6">
            <p>You can alter the appearance of the calendar in several ways:</p>
            <table>
                <tr>
                    <th>cell_border</th>
                    <td class="type">boolean</td>
                    <td>Set a cell-border around the calendar itself, the days-of-week header and the individual days.
                        Otherwise only a line is displayed.
                    </td>
                </tr>
                <tr>
                    <th>today</th>
                    <td class="type">boolean</td>
                    <td>Display today with a special badge.</td>
                </tr>
                <tr>
                    <th>show_days</th>
                    <td class="type">boolean</td>
                    <td>Show the days-of-week header.</td>
                </tr>
                <tr>
                    <th>weekstartson</th>
                    <td class="type">integer</td>
                    <td>Start the week on Sunday (0) or Monday (1).</td>
                </tr>
                <tr>
                    <th>nav_icon</th>
                    <td class="type">object</td>
                    <td>Override 'prev' and/or 'next' icon html</td>
                </tr>
            </table>
        </div>
        <div class="col-xs-6">
            <p class="comment"><span class="glyphicon glyphicon-comment"></span> override other styling elements with
                your own css.</p>
            <br>

            <p><a href="http://fontawesome.io/" target="_blank">Font Awesome</a> was added to this page to show an
                alternative icon example:</p>
            <code>&lt;link href=&quot;//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css&quot; rel=&quot;stylesheet&quot;&gt;</code>
        </div>
    </div>

    <hr>

    <div class="row">
        <div class="col-xs-5">

            <div id="my-calendar"></div>

            <script type="application/javascript">
                $(document).ready(function () {
                    $("#my-calendar").zabuto_calendar({
                        cell_border: true,
                        today: true,
                        show_days: false,
                        weekstartson: 0,
                        nav_icon: {
                            prev: '<i class="fa fa-chevron-circle-left"></i>',
                            next: '<i class="fa fa-chevron-circle-right"></i>'
                        }
                    });
                });
            </script>

        </div>
        <div class="col-xs-6 col-xs-offset-1">

<code>
&lt;!-- set the border for the days and hide the days of the week header
     plus start the week on sunday and not monday --&gt;
&lt;script type=&quot;application/javascript&quot;&gt;
  $(document).ready(function () {
    $(&quot;#my-calendar&quot;).zabuto_calendar({
      <span>cell_border: true,
      today: true,
      show_days: false,
      weekstartson: 0,
      nav_icon: {
        prev: '&lt;i class=&quot;fa fa-chevron-circle-left&quot;&gt;&lt;/i&gt;',
        next: '&lt;i class=&quot;fa fa-chevron-circle-right&quot;&gt;&lt;/i&gt;'
      }</span>
    });
  });
&lt;/script&gt;
</code>

        </div>
    </div>

</div>
<!-- /container -->

</body>
</html>